// import React from 'react';
// import {
//   SafeAreaView,
//   ScrollView,
//   StatusBar,
//   StyleSheet,
//   View,
// } from 'react-native';
// import * as exampleByName from './examples';
// import {NavigationContainer, Page} from './components';
// import {Benchmarker, DeepTree, SierpinskiTriangle} from './benchmarks';
// import {PortalHost, PortalProvider} from '@gorhom/portal';
// import * as testSuiteByName from './tests';
// import {Tester} from '@rnoh/testerino';
// import {Environment} from './contexts';

// const {TesterExample, SequentialTester, ...remainingExampleByName} =
//   exampleByName;

// function App() {
//   return (
//     <Environment>
//       <View style={{backgroundColor: 'black'}}>
//         <StatusBar barStyle="light-content" />
//         <SafeAreaView style={{paddingBottom: 0}}>
//           <NavigationContainer>
//             <PortalProvider>
//               <View id="__harmony::ready" />
//               <Page name="CONCURRENT TESTER">
//                 <TesterExample
//                   filter={({tags}) => {
//                     return !tags.includes('sequential');
//                   }}
//                 />
//               </Page>
//               <Page name="CONCURRENT TESTER: DEV">
//                 <TesterExample
//                   filter={({tags}) => {
//                     return !tags.includes('sequential') && tags.includes('dev');
//                   }}
//                 />
//               </Page>
//               <Page name={'SEQUENTIAL TESTER [driver required]'}>
//                 <SequentialTester
//                   filter={({tags}) => {
//                     return tags.includes('sequential');
//                   }}
//                 />
//               </Page>
//               <Page name="SEQUENTIAL TESTER: DEV">
//                 <SequentialTester
//                   filter={({tags}) => {
//                     return tags.includes('sequential') && tags.includes('dev');
//                   }}
//                 />
//               </Page>
//               {Object.keys(testSuiteByName).map(testSuiteName => {
//                 const TestSuite =
//                   testSuiteByName[
//                     testSuiteName as keyof typeof testSuiteByName
//                   ];
//                 return (
//                   <Page
//                     key={testSuiteName}
//                     name={`${testSuiteName.replace('Test', '')}`}>
//                     <Tester
//                       style={{flex: 1}}
//                       filter={({tags}) => {
//                         return !tags.includes('sequential');
//                       }}>
//                       <ScrollView style={{flex: 1}}>
//                         <TestSuite key={testSuiteName} />
//                       </ScrollView>
//                     </Tester>
//                   </Page>
//                 );
//               })}
//               <Page name="BENCHMARK: DEEP TREE">
//                 <Benchmarker
//                   samplesCount={0}
//                   renderContent={refreshKey =>
//                     refreshKey % 2 === 0 ? (
//                       <DeepTree depth={9} breadth={2} id={0} wrap={1} />
//                     ) : null
//                   }
//                 />
//               </Page>
//               <Page name="BENCHMARK: DEEP TREE (20 samples)">
//                 <Benchmarker
//                   samplesCount={20}
//                   renderContent={refreshKey =>
//                     refreshKey % 2 === 0 ? (
//                       <DeepTree depth={6} breadth={2} id={0} wrap={1} />
//                     ) : null
//                   }
//                 />
//               </Page>
//               <Page name="BENCHMARK: UPDATING COLORS">
//                 <Benchmarker
//                   samplesCount={100}
//                   renderContent={refreshKey => (
//                     <SierpinskiTriangle
//                       s={150}
//                       x={150}
//                       y={75}
//                       depth={1}
//                       renderCount={refreshKey}
//                     />
//                   )}
//                 />
//               </Page>
//               <Page name="BENCHMARK: UPDATING LAYOUT">
//                 <Benchmarker
//                   samplesCount={200}
//                   renderContent={refreshKey => (
//                     <SierpinskiTriangle
//                       s={refreshKey}
//                       x={160}
//                       y={75}
//                       depth={1}
//                       renderCount={refreshKey}
//                     />
//                   )}
//                 />
//               </Page>
//               {Object.entries(remainingExampleByName).map(
//                 ([exampleName, Example]) => {
//                   return (
//                     <Page key={exampleName} name={`EXAMPLE: ${exampleName}`}>
//                       <Example />
//                     </Page>
//                   );
//                 },
//               )}
//               <View
//                 style={[
//                   StyleSheet.absoluteFill,
//                   {zIndex: 100, pointerEvents: 'box-none'},
//                 ]}>
//                 <PortalHost name="ModalHost" />
//               </View>
//             </PortalProvider>
//           </NavigationContainer>
//         </SafeAreaView>
//       </View>
//     </Environment>
//   );
// }

import React, { useRef, useEffect } from 'react';
import { View, Animated, StyleSheet, Easing } from 'react-native';

/**
 * JS 驱动的动画组件：
 * - 第一个方块：透明度 0.3 ↔ 1 循环变化
 * - 第二个方块：垂直位移 -50 ↔ 50 循环变化
 */
const JSDrivenAnimation = () => {
  // 1. 初始化动画核心值（0 ↔ 1 循环）：复用该值实现所有方块的动画同步
  const animationValue = useRef(new Animated.Value(0)).current;

  // 2. 定义循环动画配置
  useEffect(() => {
    // 构建 0→1→0 的循环动画（总时长 3 秒）
    const loopAnimation = Animated.loop(
      Animated.sequence([
        // 阶段1：值从0到1，耗时1500ms
        Animated.timing(animationValue, {
          toValue: 1,
          duration: 1500,
          useNativeDriver: false, // JS 驱动（非原生驱动）
          easing: Easing.linear,
        }),
        // 阶段2：值从1到0，耗时1500ms
        Animated.timing(animationValue, {
          toValue: 0,
          duration: 1500,
          useNativeDriver: false,
          easing: Easing.linear,
        }),
      ])
    );

    // 启动动画
    loopAnimation.start();

    // 组件卸载时清理动画（防止内存泄漏）
    return () => loopAnimation.stop();
  }, [animationValue]);

  // 3. 插值计算：将 0→1 映射为具体的动画属性值
  // 第一个方块：透明度插值（0.3 ↔ 1）
  const opacity = animationValue.interpolate({
    inputRange: [0, 1],
    outputRange: [0.3, 1],
    extrapolate: 'clamp', // 防止值超出范围
  });

  // 第二个方块：垂直位移插值（-50 ↔ 50）
  const translateY = animationValue.interpolate({
    inputRange: [0, 1],
    outputRange: [-50, 50],
    extrapolate: 'clamp',
  });

  return (
    <View style={styles.container}>
      {/* 第一个方块：仅透明度变化 */}
      <Animated.View
        style={{
          width: 150,
          height: 150,
          backgroundColor: '#61dafb',
          borderRadius: 20,
          opacity: opacity,
          transform: [{ translateY: 0 }],
        }}
      />

      {/* 第二个方块：仅上下位移变化 */}
      <Animated.View
        style={{
          width: 150,
          height: 150,
          backgroundColor: '#61dafb',
          borderRadius: 20,
          marginTop: 30, // 与第一个方块拉开间距
          opacity: 1,
          transform: [{ translateY }],
        }}
      />
    </View>
  );
};

// 样式定义
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
});

export default JSDrivenAnimation;